<template>
  <el-row>
    <el-row>
      <white-board>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>题库-试卷</el-breadcrumb-item>
        </el-breadcrumb>
      </white-board>
    </el-row>

    <el-row>
      <el-form ref="searchForm" :model="searchForm">
        <search-white-board :show-more="false" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="3"><label class="search-label">名称</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.name" placeholder="请输入名称" clearable></el-input>
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row style="line-height: 40px; text-align: right;">
          <el-col :span="6" :offset="18" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" row-key="id"  style="width: 100%;" >
            <el-table-column prop="paperId" label="标识" width="180"></el-table-column>
            <el-table-column prop="paperType" label="年级分类" width="100"></el-table-column>
            <el-table-column prop="paperGrade" label="年级" width="100"></el-table-column>
            <el-table-column prop="paperSubject" label="学科"  width="100"></el-table-column>
            <el-table-column prop="paperName" label="名称" width="300"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="primary" plain @click="handleAddStem(scope.$index, scope.row)">添加题目</el-button>
                <el-button type="danger" plain @click="handleDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
      </white-board>
    </el-row>

    <el-drawer
      :title="previewTitle"
      :visible.sync="drawerVisible"
      :direction="direction"
      >
      <template>
        <el-table
          :data="previewData"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">

                <el-form-item label="选项">
                  <span>{{ props.row.optionList.length }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="题目内容"
            prop="name">
          </el-table-column>

        </el-table>
      </template>
    </el-drawer>


    <el-dialog :visible.sync="dialogVisible" ref="form">
      <el-divider></el-divider>
      <label slot="title" style="float: left;">{{dialogTitle}}</label>

      <el-row>
        <el-col :span="18" :offset="3">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">

            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="年级分类" prop="type">
              <el-select v-model.trim="form.type" placeholder="" clearable @change="typeChanged">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级" prop="group">
              <el-select v-model.trim="form.group" placeholder="" clearable @change="gradeChanged">
                <el-option v-for="item in gradeOption" :key="item.value" :label="item.label" :value="item.label"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="学科" prop="subject">
              <el-select v-model.trim="form.subject" placeholder="" clearable @change="subjectChanged">
                <el-option v-for="item in subjectOption" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider></el-divider>
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleUpdate" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  import paperApi from "@/api/paperApi"

  export default {
    name: 'paper',
    components: {
    },
    data () {
      return {
      currentPage: 1,
      previewTitle: '',
      direction: 'ltr',
        defaultProps: {
          label: 'name',
          children: 'child',
        },
        searchForm: {

          start: 1,
          limit: 10
        },
        tableData: [],
        uploadData: {
          tree: null,
          treeNode: null,
          resolve: null
        },
        typeOption: [{
            value : '1',
            label: '小学'
          }, {
            value : '2',
            label: '初中'
          }, {
            value : '3',
            label: '高中'
          }
        ],
        gradeOption: [],

        primaryOption: [{
            value : '1',
            label: '一年级'
          }, {
            value : '2',
            label: '二年级'
          }, {
            value : '3',
            label: '三年级'
          }, {
            value : '4',
            label: '四年级'
          }, {
            value : '5',
            label: '五年级'
          }, {
            value : '6',
            label: '六年级'
          }
        ],
        middleOption: [{
            value : '1',
            label: '一年级'
          }, {
            value : '2',
            label: '二年级'
          }, {
          value : '3',
          label: '三年级'
          }
        ],
        subjectOption: [{
            value : '1',
            label: '语文'
          }, {
            value : '2',
            label: '数学'
          }, {
            value : '3',
            label: '英语'
          }
        ],


        dialogTitle: '',
        dialogVisible: false,
        dialogdelVisible: false,
        drawerVisible: false,
        currentSelectRow: {}, // 当前选中行
        form: {
        id: '',
          group: '',
          name: '',
          subject: '',
          type: ''
        },

        formRules: {
          name: [{required: true, message: '请输入名称', trigger: 'blur'}],
          type: [{required: true, message: '请选择年级分类', trigger: 'blur'}],
          group: [{required: true, message: '请选择年级', trigger: 'blur'}],
          subject: [{required: true, message: '请选择学科', trigger: 'blur'}],
        },
        result: {
        },
        previewData: [],
        a: {}


      }
    },
    mounted () {
      this.list()
    },
    methods: {
      handleSizeChange(val) {
            this.searchForm['limit']=val;
            this.list()
      },
      handleCurrentChange(val) {
        this.searchForm['start']=val+1
        this.list()
      },
      filterNode (value, data) {
        if (!value) {
          return true
        }

        return data.name.indexOf(value) !== -1
      },
      list () {
        this.currentSelectRow = {}
        this.tableData = []
        paperApi.page(this.searchForm).then(data => {

          this.total = data.total

          this.tableData = data.data
        })
      },
      rowClick (row, event, column) {
        this.currentSelectRow = row
      },
      typeChanged (value) {
        console.log(value)
        if (value === "小学") {
          this.gradeOption = this.primaryOption
        } else {
          this.gradeOption = this.middleOption
        }
      },
      gradeChanged (value) {
        console.log(value)
      },
      subjectChanged (value) {
        console.log(value)
      },
      handleAdd () {
        /* 重置表单 */

        this.dialogTitle = '新增'
        this.dialogVisible = true
      },
      handleEdit (index,row) {
        this.form['id'] = row.paperId
        this.form['group'] = row.group
        this.form['name'] = row.name
        this.form['subject'] = row.subject
        this.form['type'] = row.type
        this.dialogTitle = '编辑'
        this.dialogVisible = true
      },
      handleDel (index,row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          paperApi.deleteByPaperId(row.paperId).then(data => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })

            this.list()
            this.load(this.uploadData.tree, this.uploadData.treeNode, this.uploadData.resolve)
          })
        })
      },
      load(tree, treeNode, resolve) {
        this.uploadData.tree = tree
        this.uploadData.treeNode = treeNode
        this.uploadData.resolve = resolve
        let value = tree.id
          resolve(data)

      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return
          }
          paperApi.Update(this.form).then(data => {

            this.dialogVisible = false
            this.$refs['form'].resetFields()
            this.list()
          })
        })
      },
      handleUpdate () {


          paperApi.Update(this.form).then(data => {

            this.dialogVisible = false
            this.$refs['form'].resetFields()
            this.list()

        })
      },

      handleAddStem () {

      },
      async handlePreview (index,row) {
        this.previewData=[]
        this.result=await paperApi.preview(row.paperId)
        this.result=this.result.topics
        for (let i=0;i<this.result.length;i++){
          this.a = await paperApi.showStem(this.result[i])
          this.previewData.push(this.a)
        }



        this.drawerVisible = true
        this.previewTitle = row.paperName

      }
    }
  }
</script>

<style scoped>
</style>
